<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件委托、事件代理</title>
</head>
<style>

</style>
<body>
  <button>增加li</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</body>
<script>
  var oList = document.getElementsByTagName("li"),
      oUl = document.getElementsByTagName("ul")[0],
      oBtn = document.getElementsByTagName("button")[0];
  // for(var i in oList){
  //   oList[i].onclick = function(){
  //     console.log(this.innerHTML);
  //   }
  // }

  oBtn.onclick = function(){
    var item = document.createElement("li");
    item.innerText = oList.length + 1;
    oUl.appendChild(item);
  }

  oUl.onclick = function(e){
    var e = e || window.event;
    var tar = e.target || e.srcElement;
    console.log(tar.innerText);

    // 如何在事件委托中打印当前的下标
    var index = Array.prototype.indexOf.call(oList, tar);
    console.log("下标: " + index);
  }
</script>
</html>